<script lang="ts" setup>
import { onMounted, onUnmounted, ref, getCurrentInstance, markRaw } from "vue"
import useDraw from "@/utils/useDraw"
const { proxy }: any = getCurrentInstance()
// * 适配处理
const { calcRate, windowDraw, unWindowDraw } = useDraw()
const eacharts1 = ref(null)
const myChart = ref<any>()
const renderChart = () => {
  if (myChart.value == null) {
    const myDom = eacharts1.value
    myChart.value = markRaw(proxy.$echarts.init(myDom))
  }

  myChart.value.setOption({
    title: {
      text: "Stacked Line"
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: "Union Ads",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: "Video Ads",
        type: "line",
        stack: "Total",
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: "Direct",
        type: "line",
        stack: "Total",
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: "Search Engine",
        type: "line",
        stack: "Total",
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  })
}

// 生命周期
onMounted(() => {
  windowDraw()
  calcRate()
  // console.log(eacharts1.value)
  renderChart()
})

onUnmounted(() => {
  unWindowDraw()
})
</script>
<template>
  <div class="eacharts1" ref="eacharts1" style="width: 500px; height: 500px" />
</template>
